<template>
  <view class="bg-black">
    <layout-page :size="14">
      <template #default>
        <view class="w-full h-420 bg-amber rounded-lg shadow-xl">
          <view class="ml-4 flex flex-col gap-3">
            <view class="mt-4">
              <text class="text-lg font-bold mr-2">学习课程</text>
              <van-icon name="arrow" size="16" />
            </view>
            <text class="text-base font-thin">阶段性学习课程专区</text>
          </view>
          <view class="flex mt-12 justify-end mr-5">
            <van-image
              width="70"
              height="70"
              src="https://img.yzcdn.cn/vant/cat.jpeg"
            />
          </view>
        </view>
      </template>
      <template #show>
        <view
          class="w-full h-200 bg-blue rounded-lg shadow-xl flex justify-between"
        >
          <view class="ml-2 flex flex-col gap-3">
            <view class="mt-2">
              <text class="text-lg font-bold mr-2">我的证书</text>
              <van-icon name="arrow" size="16" />
              <text class="text-base font-thin">证书查询</text>
            </view>
          </view>
          <view class="flex justify-center items-center mr-2">
            <van-image
              width="40"
              height="40"
              src="https://img.yzcdn.cn/vant/cat.jpeg"
            />
          </view>
        </view>
        <view class="mt-2">
          <layout-page :size="14">
            <template #default>
              <view class="p-3 bg-gray-800 rounded-lg shadow-lg">
                <text class="text-sm font-bold text-white">22</text>
                <view class="flex gap-2 mt-2">
                  <text class="text-sm font-bold text-white">我的</text>
                  <van-icon name="arrow" size="12" class="text-white" />
                </view>
              </view>
            </template>
            <template #show>
              <view class="p-3 bg-gray-800 rounded-lg shadow-lg">
                <text class="text-sm font-bold text-white">22</text>
                <view class="flex gap-2 mt-2">
                  <text class="text-sm font-bold text-white">你的</text>
                  <van-icon name="arrow" size="12" class="text-white" />
                </view>
              </view>
            </template>
          </layout-page>
        </view>
      </template>
    </layout-page>
  </view>
</template>

<script setup lang="ts">
import LayoutPage from '@/layout/LayoutPage.vue'
</script>
<script lang="ts">
export default {
  name: 'LearningCourse'
}
</script>

<style scoped></style>
